<template>
  <div class="content2">
    <div
      class="swiper-container swiper mySwiper swiper-initialized swiper-horizontal swiper-pointer-events swiper-free-mode swiper-backface-hidden"
    >
      <div
        class="swiper-wrapper"
        id="swiper-wrapper-4a253a95315d3ce9"
        aria-live="polite"
      >
        <div class="swiper-slide" v-for="(item, index) in arr" :key="index">
          <img :src="item.url" />
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import Swiper from "swiper";
import "swiper/css/swiper.min.css";
export default {
  components: {
    Swiper,
  },
  name: "swiperpack",
  props: {
    arr: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {};
  },
  created() {},
  methods: {},
  mounted() {
    new Swiper(".mySwiper", {
      autoplay: true, //等同于以下设置
      loop: true,
      slidesPerView: "auto",
      centeredSlides: true,
       observer:true,//修改swiper自己或子元素时，自动初始化swiper
    observeParents:true,//修改swiper的父元素时，自动初始化swiper
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
    });
  },
};
</script>

<style lang="scss">
.swiper-container {
  padding: 3vw 0;
  width: 100%;
  height: 100%;
}
.swiper-slide {
  border-radius: 10px;
  text-align: center;
  font-size: 18px;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  width: 85%;
}

.swiper-slide:nth-child(2n) {
  width: 85%;
}
.swiper-slide:nth-child(3n) {
  width: 85%;
}

img {
  width: 95%;
  height: 40vw;
  border-radius: 10px;
}
</style>
